<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		
		<style type="text/css">
			
			@media only screen and (min-width:700px) {
				
				p{
					color: red;
					font-size: 20px;
				}
				#d1{
					width: 100px;
					height: 100px;
					background: yellow;
				}
			}
			
			@media only screen and (min-width: 300px) and (max-width: 640px) {
				
				p{
					color: green;
					font-size: 50px;
				}
				#d1{
					width: 200px;
					height: 200px;
					background: black;
				}
			}
			
		</style>
	</head>
	<body>
		
		<p>xiangyigns</p>
		
		<div id="d1"></div>
	</body>
</html>
